<template>
  <view class="gua-picker" v-if="popUp">
    <view class="gua-nav">
      <view class="back" @click="close"><uni-icons type="back" size="24"></uni-icons></view>
      <view class="modal-title">卦象选择</view>
    </view>
    <view class="gua-container">
      <view v-for="(item, index) in guaInfo" class="gong-item" :key="index">
        <view class="gong-title">{{item.name}}</view>
        <view class="gua-box">
          <view v-for="(ele, i) in item.pages" class="gua-item" @click="guaTarget(ele)" :key="i">
            {{ele.zh}}
          </view>
        </view>
      </view>
    </view>
  </view>    
</template>

<script>
import guaInfo from './js/gua.js';
export default {
  data() {
  	return {
      popUp: false,  
      guaInfo: guaInfo
  	}
  },
  props: {
    gua: ""
  },
  methods: {
    open() {
      this.popUp = true
    },
    close() {
      this.popUp = false
    },
    guaTarget(ele) {
      this.$emit('update:gua', ele.zh);
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.gua-select {
  width: 481rpx;
  height: 60rpx;
  background-image: linear-gradient(0deg, 
    #9f8465 0%, 
    #c5a680 100%);
  
  font-size: 32rpx;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.gua-picker {
	background-color: #ffffff;
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 750px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	left: var(--window-left);
  transition: 1s;
}
.gua-nav {
  position: relative;
  width: 100%;
  height: 68rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 48rpx;
}
.back {
  position: absolute;
  bottom: 0;
  left: 40rpx;
}
.modal-title {
  font-weight: bold;
  font-size: 34rpx;
  line-height: 34rpx;
  color: #1a1a1a;
  text-align: center;
}
.gua-container {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 35rpx 40rpx 0;
}
.gong-item {
  width: 48%;
}
.gong-title {
  font-weight: bold;
  font-size: 32rpx;
  color: #1a1a1a;
  text-align: center;
}
.gua-box {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: space-around;
}
.gua-item {
  width: 48%;
  height: 48rpx;
  background-image: linear-gradient(0deg, #9f8465 0%, #c4a680 100%);
  
  font-size: 24rpx;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 8rpx;
}
</style>